<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="30" type="flex">
        <el-col :span="8">
          <NewCard title="日历">
            <div class="img-box index-calendar">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <!-- tab栏 -->
                <el-tab-pane
                  :label="item.label"
                  :name="item.name"
                  v-for="(item, index) in calendarTab"
                  :key="index"
                >
                  <el-calendar v-model="value">
                    <template slot="dateCell" slot-scope="{ date, data }">
                      <p :class="data.isSelected ? 'is-selected' : ''">
                        {{ data.day.split("-").slice(2).join("-") }}
                      </p>
                    </template>
                  </el-calendar>
                </el-tab-pane>
                <!-- tab栏 end-->
              </el-tabs>
              <div class="rlExplain">
                <p><i class="blueCircle"></i>蓝色代表可派工</p>
                <p><i class="redCircle"></i>红色代表请假</p>
                <p><i class="grayCircle"></i>灰色代表周末</p>
              </div>
            </div>
          </NewCard>
        </el-col>

        <el-col :span="16">
          <NewCard title="待办">
            <div class="backlog">{{ backlog }}</div>
            <el-collapse v-model="activeNames" @change="handleChange" accordion>
              <el-collapse-item title="一致性 Consistency" name="1">
                <div>
                  与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
                </div>
                <div>
                  在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
                </div>
              </el-collapse-item>
              <el-collapse-item title="反馈 Feedback" name="2">
                <div>
                  控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
                </div>
                <div>
                  页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
                </div>
              </el-collapse-item>
              <el-collapse-item title="效率 Efficiency" name="3">
                <div>简化流程：设计简洁直观的操作流程；</div>
                <div>
                  清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
                </div>
                <div>
                  帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
                </div>
              </el-collapse-item>
              <el-collapse-item title="可控 Controllability" name="4">
                <div>
                  用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
                </div>
                <div>
                  结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
                </div>
              </el-collapse-item>
              <el-collapse-item title="可控 Controllability" name="5">
                <div>
                  用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
                </div>
                <div>
                  结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
                </div>
              </el-collapse-item>
              <el-collapse-item title="可控 Controllability" name="6">
                <div>
                  用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
                </div>
                <div>
                  结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
                </div>
              </el-collapse-item>
              <el-collapse-item title="可控 Controllability" name="7">
                <div>
                  用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
                </div>
                <div>
                  结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
                </div>
              </el-collapse-item>
              <el-collapse-item title="可控 Controllability" name="8">
                <div>
                  用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
                </div>
                <div>
                  结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
                </div>
              </el-collapse-item>
              <el-collapse-item title="可控 Controllability" name="9">
                <div>
                  用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
                </div>
                <div>
                  结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
                </div>
              </el-collapse-item>
            </el-collapse>
          </NewCard>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import NewCard from "../../components/newCard.vue";
export default {
  created() {
    console.log("无边");
  },
  data() {
    return {
      value: new Date(),
      calendarTab: [
        {
          name: "first",
          label: "解答",
        },
        {
          name: "second",
          label: "法条",
        },
        {
          name: "third",
          label: "合同",
        },
        {
          name: "fourth",
          label: "政策",
        },
        {
          name: "fifth",
          label: "图文咨询",
        },
        {
          name: "sixth",
          label: "所有",
        },
      ],
      backlog: 6,
      //日历tab栏激活
      activeName: "first",
      //面板
      activeNames: ["1"],
    };
  },
  components: { NewCard },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleChange(val) {
      console.log(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-row {
  height: 100%;
  margin-bottom: 0px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
<style scoped>
/* 首页日历样式修改 */
::v-deep .label-box-content {
  height: 100%;
}

.el-collapse {
  overflow-y: auto;
  height: 74vh;
  border-bottom: 0;
}
.el-card {
  height: 100%;
  margin-bottom: 0px !important;
}
.el-card >>> .top {
  border-bottom: 0;
  padding-top: 0;
}
.el-card >>> .top::after {
  height: 0;
}
.el-card >>> .top h1 {
  padding-top: 10px;
}
.el-card >>> .el-card__body {
  height: 100%;
}
.el-card >>> .el-card__body > div {
  position: relative;
  padding-top: 0 !important;
}
.index-calendar >>> .el-tabs__item {
  padding: 0px 14px;
}
.el-card >>> .el-card__body > div {
  height: 100%;
}
.el-card >>> .el-card__body > div .index-calendar {
  height: 93%;
  overflow-y: auto;
}
.index-calendar >>> .el-calendar__header {
  display: flex;
  flex-wrap: wrap;
  padding: 12px 0px;
  border-bottom: 0;
}
.index-calendar >>> .el-button--mini {
  padding: 7px;
}
.index-calendar >>> .el-calendar__body {
  padding: 12px 0px 0 0;
}
.index-calendar >>> .el-calendar__header > .el-calendar__title {
  width: 35%;
}
.index-calendar >>> .el-calendar__header > .el-calendar__button-group {
  width: 55%;
}
.index-calendar >>> .el-calendar__header .el-calendar__button-group {
  display: flex;
  justify-content: flex-end;
}

.index-calendar >>> .el-calendar-table tr td:first-child,
.index-calendar >>> .el-calendar-table td {
  border: 0;
}

.index-calendar >>> .el-calendar-table td.is-selected {
  background-color: #fff;
}

.index-calendar >>> .el-calendar-table .el-calendar-day {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  padding: 0;
  position: relative;
}

.index-calendar >>> .el-calendar-table .el-calendar-day:hover {
  background-color: #fff;
}
.backlog {
  position: absolute;
  top: -43px;
  left: 65px;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p {
  display: block;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #fff;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p:hover {
  background-color: #f2f8fe;
}

.index-calendar >>> .el-calendar-table td.is-today .el-calendar-day p {
  border: 1px solid #409eff;
}

.index-calendar >>> .el-calendar-table td.is-selected .el-calendar-day p {
  color: #fff;
  background-color: #409eff;
}

.rlExplain {
  font-size: 12px;
}
.rlExplain p {
  display: flex;
  align-items: center;
  margin: 0;
}
.rlExplain i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f2f2f2;
  margin-left: 5px;
  margin-right: 3px;
}
.rlExplain i.blueCircle {
  background-color: #409eff;
}
.rlExplain i.redCircle {
  background-color: #f56c6c;
}
/* 首页日历样式修改 end */
</style>